<!--一线数据指标管理-->
<template>
  <div class="edit-container">
    <div class="search-container-item">
        <div class="item-name">请选择学期：</div>
        <el-select v-model="xueqi" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
        </el-select>
        <div class="search-button color-primary width170" @click="addCodeDialog" v-if="isAdd">
          <img src="../../../../assets/classHours/icon-addBig.png" alt="" />
          <span>新增填报字段</span>
        </div>
    </div>
    <div class="flex">
        <div class="left table-container table-css">
            <el-table :data="roleList" border ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-class-name="cellClass" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
                <el-table-column type="selection" align="center" width="100"></el-table-column>
                <el-table-column prop="roleName" label="被授予角色" align="center"></el-table-column>
            </el-table>
        </div>
        <div class="right table-container table-css">
          <el-table :data="tableData" border style="width: 100%" @class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
            <el-table-column  prop="type" label="选择分类"  width="150" align="center">
              <template slot-scope="scope">
                <el-checkbox :label="scope.row.type" v-model="scope.row.typeValue">{{scope.row.type}}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="选择填报字段">
                <div slot-scope="scope" class="flex-row">
                  <div class="item" v-for="(i,k) in scope.row.code" :key="k">
                    <el-checkbox v-if="i.fieldName !== '填报时间'" v-model="i.isUse" :label="i.isUse">{{i.fieldName}}</el-checkbox>
                    <el-date-picker class="time" v-model="scope.row.defaultValue" v-if="i.fieldName == '填报时间'" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                    <div v-if="i.fieldName == '评价标准'">
                      <p class="position" v-if="JSON.stringify(choseValue)!=='{}'">{{choseValue.pjGuiderank.guiderankoption}}</p>
                      <span class="small-btn color-yellow width110" @click="choseBZBtn"><img src="../../../../assets/assessment/icon-plan-record-save.png">选择评价标准</span>
                    </div>
                  </div>
                </div>
            </el-table-column>
          </el-table>
        </div>
    </div>
    <div class="button-group">
        <div class="" @click="save" style="margin-right:0">保存</div>
    </div>
    <!-- 新增填报字段 -->
    <addCode ref="addCode" @addCodeValue="addCodeValue"></addCode>
    <!-- 选择评价标准 -->
    <choseBZ ref="choseBz" @choseBZid="choseBZid"></choseBZ>
  </div>
</template>
<script>
import {dataConfigList,dataConfigSave,roleList} from "@/api/lineData";
import addCode from "./addCode.vue"
import choseBZ from "./choseBZ.vue"
export default {
  data() {
    return {
      xq:[],
      roleId:'',
      xueqi:'',
      choseValue:{},
      tableData: [
          {count:1}
      ],
      roleList:[]
    };
  },
  props:{
    isAdd:{
      default:true,
      type:Boolean
    }
  },
  components:{
      addCode,choseBZ
  },
  mounted(){
    this.getRole()
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.xueqi = mes.data.xqmc
      })
    })
  },
  methods: {
    addCodeDialog(){
      this.$refs.addCode.dialogVisible = true;
      this.$refs.addCode.checkList = [];
    },
    handleSelectionChange(row){
      if(row.length>1){
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row.pop());
      }
      if(row.length != 0){
         this.roleId = row[row.length - 1];
     }
    },
    // 选择评价标准
    choseBZBtn(){
        this.$refs.choseBz.dialogVisible = true;
        this.$nextTick(()=>{
          this.$refs.choseBz.$refs.multipleTable.clearSelection();
          this.$refs.choseBz.IDS = {}
        })
    },
    async getRole(){
      let res = await roleList();
      this.roleList = res.data;
      this.roleId = this.$store.getters.userInfo.role_id
      this.initList();
    },
    //添加字段
    addCodeValue(){

    },
    cellClass(row){
        if (row.columnIndex === 0) {
            return 'noneSelectHeader'
        }
    },
    choseBZid(val){
      this.choseValue = val;
      this.tableData.forEach(i=>{
        if(i.type=='评价信息'){
          i.code.forEach(k=>{
            k.defaultValue = JSON.stringify(val)
          })
        }
      })
    },
    //初始化表格
    async initList(){
      let param = {
        xueqi:this.xueqi,
        roleId:this.roleId
      }
      let res = await dataConfigList(param);
      if(res.code == 200){
        let data = res.data;
        let tableData = [];
        for(let i in data){
          tableData.push({
            type:i,
            typeValue:'',
            code:data[i]
          })
        }
        tableData.forEach(item=>{
          item.code.forEach(key=>{
            key.isUse = key.isUse == 1?true:false
            if(key.isUse == 1){
              item.typeValue = true;
            }
          })
        })
        this.tableData = tableData;
      }
    },
    //保存
    async save(){
      let param = {};
      let tableData = JSON.parse(JSON.stringify(this.tableData));
      for(let i = 0;i< tableData.length;i++){
        for(let k=0;k<tableData[i].code.length;k++){
          tableData[i].code[k].isUse = tableData[i].code[k].isUse?1:0
        }
      }
      for(let i = 0;i< tableData.length;i++){
        param[tableData[i].type] = tableData[i].code
      }
      let res = await dataConfigSave(param);
      if(res.code == 200){
        this.$emit('saveData')
      }
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width170{width: 145px;margin-left: 30px;}
.disabled{
   background: #F0F0F0;
    border: 1px solid #747474;
    color: #747474!important;
    cursor: not-allowed!important;
}
.edit-container{
    width: 100%;
    margin-top: 32px;
    .flex{
        display: flex;
        margin-top: 25px;
        .left{
            width: 402px;
            margin-right: 40px;
            /*增加文字*/
            .el-table /deep/.noneSelectHeader .cell:before{
                content:"选择";
            }
        }
        .right{
            width: calc(100% - 442px);
        }
    }
}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    margin: 4px 0 0 20px;
    width: 86px;
    height: 27px;
}
/*隐藏原有CheckBox*/
.el-table /deep/.noneSelectHeader .cell .el-checkbox{
  display: none;
}
.width110{width: 140px;}
.flex-row{
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  .item{margin-right: 40px;display: flex;align-items: center;}
}
.width94{width: 94px;margin-left: 10px;}
.position{position: absolute;top: 5px;left: 136px;}
</style>
